<template>
  <div class="wrapper">
    <div class="login_wrapper">
      <div class="login_wrapper_top">
        <div class="title">Login 蜘蛛网</div>
        <div class="togo" @click="$router.push('/login')">登录 <i class="iconfont icon-jiantou21-copy"></i></div>
      </div>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
        <div class="form_item_cell">
          <i class="iconfont icon icon-zhikeshuma-"></i>
          <el-form-item prop="phone">
            <el-input
              class="login_input"
              v-model="loginForm.phone"
              placeholder="请输入11位手机号码"
              name="phone"
              type="text"
              auto-complete="on"
            />
            <span class="show_code" @click="getCaptcha">
              {{captchaText}}
            </span>
          </el-form-item>
        </div>
        <div class="form_item_cell">
          <i class="iconfont icon icon-zhikeshuma-"></i>
          <el-form-item prop="captcha">
            <el-input
              class="login_input"
              v-model="loginForm.captcha"
              placeholder="请输入手机验证码"
              name="captcha"
              type="text"
              auto-complete="on"
            />
          </el-form-item>
        </div>
        <div class="form_item_cell">
          <i class="iconfont icon icon-mima"></i>
          <el-form-item prop="password">
            <el-input
              class="login_input"
              :type="passwordType"
              v-model="loginForm.password"
              placeholder="请输入6~16位字符"
              name="password"
              auto-complete="on"
              @keyup.enter.native="handleLogin" />
            <span class="show-pwd" @click="showPwd">
              <i :class="`iconfont ${passwordType === 'password'?'icon-yincang':'icon-Group-'}`"></i>
            </span>
          </el-form-item>
        </div>
        <div class="form_item_cell">
          <i class="iconfont icon icon-dizhi"></i>
          <el-form-item prop="password">
            <el-cascader
              class="login_input"
              placeholder="请选择您所属区域"
              :options="areaData"
              v-model="loginForm.selectedOptions"
              @change="handleChange">
            </el-cascader>
          </el-form-item>
        </div>
        <div class="login_submit_cell">
          <el-button class="button" :loading="loading" type="primary" @click.native.prevent="handleLogin">注册</el-button>
        </div>
        <div class="login_tips_cell">
          注册即表示同意<a href="javascript:;" class="agreement">《蜘蛛网软件注册协议》</a>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { regionData } from 'element-china-area-data'
export default {
  data () {
    return {
      loading: false,
      passwordType: 'password',
      captchaText: '获取验证码',
      areaData: regionData,
      loginForm: {
        phone: '',
        password: '',
        captcha: '',
        selectedOptions: []
      },
      loginRules: {
        phone: [{required: true, trigger: 'blur', message: '手机号不可为空'}],
        password: [{required: true, trigger: 'blur', message: '密码不可为空'}],
        captcha: [{required: true, trigger: 'blur', message: '验证码不可为空'}]
      }
    }
  },
  watch: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {
    showPwd () {
      this.passwordType = this.passwordType === 'password' ? '' : 'password'
    },
    getCaptcha () {},
    handleChange (val) {
      console.log(val)
    },
    handleLogin () {}
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #F5F9FA;
}
.login_wrapper{
  width: 300px;
  .login_wrapper_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 25px;
    margin-bottom: 40px;
    .title {
      font-size: 18px;
      color: #333;
      font-weight: bold;
    }
    .togo {
      cursor: pointer;
      color: #84E3F5;
      font-size: 10px;
      .iconfont {
        position: relative;
        top: 1px;
        right: 1px;
      }
    }
  }
}
.form_item_cell {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  .icon {
    margin-right: 10px;
    font-size: 28px;
    color: #6D6D6D;
  }
  .el-form-item {
    flex: 1;
    margin-bottom: 0;
  }
  .show-pwd {
    position: absolute;
    right: 15px;
    top: 0px;
    font-size: 16px;
    color: #C0C0C0;
    cursor: pointer;
    user-select: none;
    .iconfont {
      font-size: 20px;
    }
  }
  .show_code {
    position: absolute;
    right: 15px;
    top: 0px;
    font-size: 10px;
    color: #84E3F5;
  }
}
.login_submit_cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .button {
    flex: 1;
    padding: 0;
    background: #84E3F5;
    border: 0;
    border-radius: 20px;
    font-size: 14px;
    width: 120px;
    height: 40px;
    line-height: 40px;
  }
}
.login_tips_cell {
  margin-top: 10px;
  font-size: 10px;
  color: #999;
  text-align: center;
  .agreement {
    color: #84E3F5;
  }
}
</style>
<style lang="less">
.login_input {
  width: 100%;
  .el-input__inner,
  .el-cascader__label {
    border: 0;
    border-radius: 20px;
    box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.10);
    &::placeholder {
      color: #C0C0C0;
      font-size: 10px;
    }
  }
}
</style>
